<template>
  <div class="container">
    <view class="loginMain">
      <uv-navbar title="" :placeholder="true" :autoBack="true" rightIcon="server-man"></uv-navbar>
      <view class="loginWrap">
        <view class="textCenter title bold">登录</view>
        <uv-form :model="model" ref="form">
          <uv-form-item>
            <uv-input v-model="model.phone" border="none" shape="circle" placeholder="请输入手机号" :customStyle="inputStyle">
              <!-- vue3模式下必须使用v-slot:prefix -->
              <template v-slot:prefix>
                <uv-button text="+86" shape="circle" :customStyle="btnStyle"></uv-button>
              </template></uv-input>
          </uv-form-item>
          <uv-form-item>
            <uv-input v-model="model.verificationCode" border="none" shape="circle" placeholder="请输入短信验证码" :customStyle="inputStyle">
              <!-- vue3模式下必须使用v-slot:suffix -->
              <template v-slot:suffix>
                <phoneCode :mobile="model.phone"></phoneCode>
              </template></uv-input>
          </uv-form-item>
          <view class="flex justifyCenter">
            <uv-button text="登录/注册" @click="toLogin" shape="circle" :loading="loading" :customStyle="loginBtnStyle" :color="proxy.$config.actionBtn"></uv-button>
          </view>
        </uv-form>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import phoneCode from "@/components/uv/phoneCode.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let loading = ref(false);
let model = ref({
  phone: "",
  verificationCode: "",
  gender: "man",
  birthday: "",
});
let inputStyle = ref({
  backgroundColor: "#F6F6F6",
  padding: "5px",
});
let btnStyle = ref({
  boxShadow: "0 2px 8px 2px rgba(225, 225, 225, 0.53)",
});
let loginBtnStyle = ref({
  margin: "25px auto 45px",
  width: "100%",
});
let codeLoading = ref(false);

let toLogin = async () => {
  try {
    loading.value = true;
    let { token, isNew, account } = await proxy.$apis.loginVerification(
      model.value
    );
    counter.setRelease("token", token);
    counter.setRelease("userId", account);
    //新用户
    if (isNew) {
      proxy.$utils.toLink("/packagePages/my/baseInfo");
    } else {
      counter.init();
      //nim.initIm();
      //proxy.$utils.showToast("登录成功");
      proxy.$utils.toLink("/pages/tabbar/tabbar-1/tabbar-1", "tab");
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>



<style lang="scss" scoped>
.loginMain {
  padding-bottom: 30px;
  transition: all 0.5s;
}
.loginWrap {
  background-color: white;
  border-radius: 20px;
  padding: 35px 25px;

  .title {
    font-size: 24px;
    margin-bottom: 30px;
  }
}
</style>
